<!--
 * @Author: your name
 * @Date: 2021-11-06 16:16:16
 * @LastEditTime: 2021-11-06 18:57:02
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \ej-app2\src\components\Orders.vue
-->
<template>
<!-- 居中 -->
    <!-- status:{{status}} -->
    <!-- noshow:{{show}} {{orderDates.length}} {{status}} -->
    <div class="order">
            <van-row justify="center" v-for="k in orderDates" :key="k.id">
                <van-col span="6">
                    <van-image
                    round
                    width="6rem"
                    height="6rem"
                    :src="k.customer.userFace"
                    />
                </van-col>
                
                <van-col span="18" class="right">
                    <van-cell-group inset>
                        <div class="username"></div>
                        <div class="status">
                            <van-tag round text-color="white" :type="k.status=='已完成' ?'success' : k.status=='待服务' ? 'primary' : k.status=='待接单' ? 'warning' : 'danger'">
                                {{k.status}}
                            </van-tag>
                        </div>
                        <van-cell>
                            <template #value>
                                <div class="address">
                                地址: {{k.address.username +'  tel: '+k.address.telephone+
                                        k.address.province+'-'+k.address.city+'-'+k.address.area+'-'+k.address.address}}
                                </div>
                            </template>
                        </van-cell>
                        <div class="time">
                            下单时间: {{getTime(k.orderTime)}}
                            <br>
                            派单时间: {{getTime(k.serviceTime)}}
                        </div>
                    </van-cell-group>
                </van-col>
            </van-row>
            

            <van-empty :description="str" v-show="show"/>
            
    </div>

</template>

<script>
import { get } from '../utils/axios'
export default {
    props:{
        status:'',
    },
    data(){
        return{
            orderDates:[],//订单数
            show:false,
            str:"",
        }
    },
    methods:{
        // 获取全部订单
        getAllOrder(){
            // 定义一个查询对象
                let query={
                    page:1,
                    pageSize:999,
                }
                if(this.status!=""){
                    query.status=this.status
                }
            get('/order/pageQuery',query).then((res)=>{
                console.log(res.data.list)
                if(res.data.list.length==0){
                    this.show=true
                    this.str="没有"+this.status+'订单';
                }else{
                    this.show=false
                }
                this.$emit('getShow',this.show)
                this.orderDates=res.data.list;
            });
        },


        getTime(mytime){
            let time = new Date(mytime)
            let year = time.getFullYear()
            let month = time.getMonth() + 1
            let date = time.getDate()
            let hours = time.getHours()
            let minute = time.getMinutes()
            let second = time.getSeconds()

            if (month < 10) { month = '0' + month }
            if (date < 10) { date = '0' + date }
            if (hours < 10) { hours = '0' + hours }
            if (minute < 10) { minute = '0' + minute }
            if (second < 10) { second = '0' + second }
            return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
        }
    },

    created(){
        this.getAllOrder()
    },

}
</script>

<style lang="less" scoped>
    .order{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    
    /deep/ .van-row{
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgb(233, 233, 233);
        width: 90%;
        margin: 10px auto;
        border-radius: 15px;
        padding: 5px 5px;
        box-shadow: 1px 2px 2px 2px gainsboro;
    }
    *{
        font-weight: 500;
        font-size: 12px;
        color: rgb(73, 73, 73);
    }
    /deep/.van-cell-group{
        padding: 10px 10px;
        
    }

    .time{
        padding: 2px 10px;
    }
    .a{
        content: "";
        width: 20px;
        height: 300px;
        opacity: 0;
    }
</style>